<template>
    <view class="userNav" v-if="stateHeights > 0">
        <!-- 吸顶 -->
        <view class="top">
            <!-- 状态栏 -->
            <view class="state" :style="{ height: stateHeights + 'rpx' }">
            </view>
            <!-- 标题栏 返回按钮 -->
            <view class="capsule" :style="{ height: capsuleHeights + 'rpx' }">
                <!-- 返回按钮 -->
                <view class="item-wrap">
                    <image
                        class="item-wrap-right"
                        src="../../static/Arrow Right 2.png"
                        @click="toBack()"
                    />
                </view>
                <!-- 标题 -->
                <view class="item-wrap">
                    <view class="item-wrap-title">
                        {{ title }}
                    </view>
                </view>
                <view class="item-wrap"> </view>
            </view>
            <!-- 用户 -->
            <view class="user">
                <!-- 头像 用户名 -->
                <view>
                    <image src="../../static/User 60.png" class="UserProfile" />
                    <text class="username">18632817508</text>
                </view>
                <!-- 切换账号 -->
                <view class="switch">
                    <text>切换账号</text>
                    <image
                        class="switch-right"
                        src="../../static/Arrow Right 2.png"
                    />
                </view>
            </view>
        </view>
        <!-- 撑开 -->
        <view class="bot"></view>
    </view>
</template>

<script>
export default {
    name: "UserNav",
    props: {
        title: {
            type: String,
            default: "",
        },
    }, //接受传过来的标题
    data() {
        return {
            stateHeights: 0, //状态栏高度
            capsuleHeights: 0, //标题栏高度
        };
    },
    mounted() {
        //获取状态栏高度
        this.stateHeights = this.pxTOrpx(
            uni.getMenuButtonBoundingClientRect().top
        );

        //获取标题栏高度
        this.capsuleHeights = this.pxTOrpx(
            uni.getMenuButtonBoundingClientRect().height
        );
    },
    methods: {
        //px转rpx
        pxTOrpx(px) {
            return (750 / uni.getSystemInfoSync().windowWidth) * px;
        },
        //返回
        toBack() {
            uni.navigateBack();
        },
    },
};
</script>

<style lang="scss" scoped>
.userNav {
    width: 100%;
    height: 320rpx;
    background-color: #1ba9ba;
    display: flex;
    flex-direction: column;
    .top {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 350rpx;
        position: fixed;
        top: 0;
        left: 0;
        .capsule {
            width: 100%;
            display: flex;
            align-items: center;
            color: white;
            font-size: 36rpx;
            .item-wrap {
                width: 33.3%;
                .item-wrap-title {
                    text-align: center;
                }
                .item-wrap-right {
                    transform: rotate(180deg);
                    width: 60rpx;
                    height: 60rpx;
                    margin-left: 30rpx;
                }
            }
        }
        .user {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: white;
            view {
                display: flex;
                align-items: center;
                .UserProfile {
                    width: 70rpx;
                    height: 70rpx;
                    margin-left: 40rpx;
                }
                .username {
                    margin-left: 20rpx;
                    font-size: 40rpx;
                    font-weight: 510;
                }
            }
            .switch {
                text {
                    font-size: 30rpx;
                }
                .switch-right {
                    width: 50rpx;
                    height: 50rpx;
                    margin-right: 60rpx;
                }
            }
        }
    }
    .bot {
        width: 100%;
        height: 100%;
    }
}
</style>
